import { FC } from "react";
import { View, Text, Image } from "@tarojs/components";
import { HIcon } from "@/components";
import Taro from "@tarojs/taro";
import styles from "./index.module.less";
interface MenuObj {
  /**菜单名称 */
  name: string;
  /**菜单图标 */
  icon: string;
  /**菜单路径 */
  path: string;
  /**菜单背景色 */
  color: string;
  /**字体图标大小 */
  size: number;
}

const Menu: FC = () => {
  const onNavigator = (item: MenuObj) => {
    if (item.name === "公众号") {
      return Taro.showModal({
        content: "暂时没有公众号",
        confirmColor: "#FD4067",
        showCancel: false,
      });
    }
    Taro.navigateTo({
      url: item.path,
    });
  };
  return (
    <View className={styles["menu-wrapper"]}>
      <View className={styles["menu-item-wrapper"]}>
        {menuList.map((item, index) => (
          <View
            key={index}
            className={styles["menu-item"]}
            onClick={() => onNavigator(item)}
          >
            <View
              style={{ backgroundColor: item.color }}
              className={styles["icon"]}
            >
              <HIcon size={item.size} type={item.icon}></HIcon>
            </View>
            <Text>{item.name}</Text>
          </View>
        ))}
      </View>
    </View>
  );
};

export default Menu;

const menuList: MenuObj[] = [
  // {
  //   name: "我的红娘",
  //   icon: "aixin1",
  //   color: "#FD486E",
  //   path: "/package/member/my-matchmaker/index",
  //   size: 56,
  // },
  {
    name: "实名认证",
    icon: "zhuanjifenshimingrenzheng",
    color: "#2CCAFE",
    path: "/package/member/authentication/index",
    size: 52,
  },
  {
    name: "我的收藏",
    icon: "shoucang",
    color: "#FEB409",
    path: "/package/member/my-star/index",
    size: 52,
  },
  // {
  //   name: "我的动态",
  //   icon: "pengyouquan",
  //   color: "#18E7A5",
  //   path: "/package/member/my-dynamic/index",
  //   size: 56,
  // },
  {
    name: "免费红线",
    icon: "xinge",
    color: "#FD486E",
    path: "/package/member/share-poster/index",
    size: 56,
  },
  {
    name: "公众号",
    icon: "daohang-gongzhonghaotixing",
    color: "#2CCAFE",
    path: "/package/member/",
    size: 56,
  },
  {
    name: "联系客服",
    icon: "kefu",
    color: "#FEB409",
    path: "/package/member/",
    size: 56,
  },
  {
    name: "设置",
    icon: "shezhi",
    color: "#18E7A5",
    path: "/package/member/setting/index",
    size: 56,
  },
];
